<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link href="/stylesheets/style.css" rel="stylesheet">
    <script src="/javascripts/lib/jquery.cookie.min.js"></script>
    <script src="/javascripts/common.js"></script>
    <script src="/javascripts/accountController.js"></script>

    <title>个人中心</title>
</head>
<body>

<div style="background-color: rgb(255,137,75);position: absolute;top: 0;height: 80px;width: 100%">
    <div class="col-sm-9 col-xs-9">
        <p style="color: #FFF;font-size: 18px;margin-top:10px;font-weight: lighter">昵称: {{user.nick_name}}</p>
        <button style="background-color: transparent;border:1px solid #FFF;border-radius: 5px;padding:2px 10px 2px 10px;color:#FFF" id="modifyBtn" >
            个人资料更改
        </button>
    </div>
    <div class="col-sm-3 col-xs-3" id="userinfo" sex="{{user.sex}}">
    </div>
</div>

<div class="sub-menu">
    <div class="sub-menu-item menu-border menu-margin col-xs-6 col-md-6 change-color user-center-menu" id="myOrder">
        我的用车
    </div>
    <div class="sub-menu-item menu-margin col-xs-6 col-md-6 user-center-menu" id="balance">账户余额</div>

    <script>

        $("#modifyBtn").click(function(){
            $("#modifyModal").modal();
        });

        $("#myOrder").click(function () {
            $(this).addClass('change-color');
            $("#balance").removeClass('change-color');
            $("#orderList").show(200);
            $(".myAccount").each(function(){
                $(this).hide(200);
            });
            $("#menuName").html("用车记录");
        });

        $("#balance").click(function () {
            $(this).addClass('change-color');
            $("#myOrder").removeClass('change-color');
            $(".myAccount").each(function(){
                $(this).show(200);
            })
            $("#orderList").hide(200);
            $("#menuName").html("我的账户");
        });
    </script>
</div>
<div class="col-xs-12 col-md-12 h-line-grey" style="border-color:#bbb"></div>

<div id="menuName" class="col-xs-12 col-md-12 margin-top sub-title margin-bottom">用车记录</div>
<div class="col-xs-12 col-md-12 h-line-grey" style="border-color:#aaa"></div>

<div style="margin-top:80px">
    <div class="col-sm-12 col-xs-12 margin-top" id="orderList">
        <div id="orderListContainer">
        {{#each order}}
            <div class="order-info">
                <p style="display: none" orderstatus="{{status}}" starttime="{{start_time}}" endtime="{{end_time}}"
                   driver="{{driver_info.name}}" drivertel="{{driver_info.tel}}" reqcarinfo="{{car_info.require_car_type}}"
                   carinfo="{{car_info.car_type}} {{car_info.car_number}}"></p>
                <p class="col-xs-12 col-sm-12 fix-height margin-less ">订单号：<span style="color: #F33">{{createdAt}}</span>
                    <span style="float: right;border:1px solid #aaa;border-radius: 3px;padding:0 5px;color:#555;font-size: 9px">{{order_type}}</span>
                </p>

                <p class="col-xs-12 col-sm-12 fix-height margin-less">出发地：<span style="color: #F33">{{start_addr.name}}</span></p>

                <p class="col-xs-12 col-sm-12 fix-height margin-less" style="margin-top: 1px">目的地：<span style="color: #F33">{{end_addr.name}}</span></p>
            </div>
            <div class="col-xs-12 col-md-12 h-line-grey" style="border-color:#bbb;margin-bottom: 5px;"></div>
        {{/each}}
        {{#if no_more}}
            <div style="text-align: center;margin-top: 5px" class="col-xs-12 col-sm-12">暂无更多记录</div>
        {{/if}}

        </div>

        <div style="z-index: 999;position: fixed;top:87%;left:60%">
            <button class="btn btn-xs btn-transparent float" id="down">下一页</button>
            <button class="btn btn-xs btn-transparent float" style="margin-right: 10px" id="up">上一页</button>
        </div>
    </div>

    <div class="margin-top myAccount hide-element margin-top col-xs-12 col-sm-12">账户余额：<span style="color:#F33;" id="balance">{{user.balance}}</span>元</div>
    <div class="myAccount hide-element col-sm-12 col-xs-12 h-line-grey" style="border-color:#bbb;"></div>

    <div class="col-sm-12 col-xs-12 hide-element myAccount" id="myAccount">
    <div class="form-horizontal col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1">

        <div class="form-group margin-top-20">
            <div class="col-xs-4 col-sm-4">
                充值金额
            </div>
            <div class="col-xs-8 col-sm-8">
                <input id="money" class="form-control" placeholder="请输入充值金额" />
            </div>
        </div>

        <div class="form-group margin-top-20">
            <div class="col-xs-4 col-sm-4">
                付款方式
            </div>
            <div class="col-xs-8 col-sm-8">
                <select class="form-control">
                    <option>支付宝</option>
                    <option>微信支付</option>
                    <option>银联支付</option>
                </select>
            </div>
        </div>

        <button class="btn btn-xs btn-warning col-sm-12 col-xs-12">充值</button>
    </div>
    </div>

    <div id="orderDetail" class="modal fade" style="margin-top: 50px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
                    <h5 class="modal-title">订单详情</h5>
                </div>
                <div class="modal-body">
                    <p>订单状态：<span id="o_status" style="color:#555"></span></p>
                    <p>出行时间：<span id="start_time" style="color:#555"></span></p>
                    <p>返回时间：<span id="end_time" style="color:#555"></span></p>
                    <p>司机姓名：<span id="driver" style="color:#555"></span></p>
                    <p>联系方式：<span id="driver_tel" style="color:#555"></span></p>
                    <p>车型车号：<span id="car_info" style="color:#555"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modifyModal" class="modal fade" style="margin-top: 20px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
                    <h5 class="modal-title">修改个人资料</h5>
                </div>
                <div class="form-horizontal col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1">

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            用户名
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input id="username" class="form-control" placeholder="{{user.username}}" disabled />
                        </div>
                    </div>

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            性别
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <span style="color:#555">
                                <input type="radio" name="sex" id="sex" value="male">&nbsp;男&nbsp;
                            </span>
                            <span>&nbsp;&nbsp;</span>
                            <span style="color:#555">
                                <input type="radio" name="sex" id="sex" value="female">&nbsp;女&nbsp;
                            </span>
                        </div>
                    </div>

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            昵称
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input id="nick_name" class="form-control" placeholder="{{user.nick_name}}" />
                        </div>
                    </div>

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            真实姓名
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input id="real_name" class="form-control" placeholder="{{user.real_name}}" />
                        </div>
                    </div>

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            微信
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input id="weixin" class="form-control" placeholder="{{user.information.weixin}}" />
                        </div>
                    </div>

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            支付宝
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input id="alipay" class="form-control" placeholder="{{user.information.alipay}}" />
                        </div>
                    </div>

                    <div class="form-group margin-top-20">
                        <div class="col-xs-4 col-sm-4">
                            QQ
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input id="qq" class="form-control" placeholder="{{user.information.qq}}" />
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">关闭</button>
                    <button type="button" id="saveModify" class="btn btn-warning btn-xs" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom-menu">
        <a href="/">首页&nbsp;</a><span>|</span>
        <a href="/piece">拼车&nbsp;</a><span>|</span>
        <a href="/rent">包车&nbsp;</a><span>|</span>
        <a href="/download/driver">与尚悦网合作&nbsp;</a><span>|</span>
        <a href="/user/center">个人中心&nbsp;</a>
    </div>
</div>
</body>
</html>